<template>
  <div class="app-project-list">
    <div class="content-list" v-show="!displayMode">
      <!-- 收藏列表 list模式 -->
      <div class="list-collect">
        <v-list>
          <v-list-item-group color="primary">
            <transition-group name="list" tag="div">
              <div class="item" v-for="(item, index) in collect" :key="item.id">
                <v-divider></v-divider>
                <v-list-item @click="handleClick(item)">
                  <v-list-item-icon>
                    <v-icon :color="getColor()" v-text="getIcon()"></v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>
                    <v-list-item-title v-text="item.name"></v-list-item-title>
                  </v-list-item-content>
                  <span v-if="item.cnt != null" class="pending">待办任务数<span class="num">{{ item.cnt }}</span></span>
                  <v-list-item-action>
                    <v-btn title="星标" @click.stop="starChange(false, item, index)" icon color="orange lighten-1">
                      <v-icon size="20" color="orange lighten-1" v-text="'fa fa-star'"></v-icon>
                    </v-btn>
                  </v-list-item-action>
                </v-list-item>
              </div>
            </transition-group>
          </v-list-item-group>
        </v-list>
      </div>
      <!-- 任务列表 list模式 -->
      <div class="list-list" v-show="!isCollect">
        <v-list>
          <v-list-item-group color="primary">
            <transition-group name="list" tag="div">
              <div class="item" v-for="(item, index) in list" :key="item.id">
                <v-divider></v-divider>
                <v-list-item @click="handleClick(item)">
                  <v-list-item-icon>
                    <v-icon :color="getColor()" v-text="getIcon()"></v-icon>
                  </v-list-item-icon>
                  <v-list-item-content>
                    <v-list-item-title v-text="item.name"></v-list-item-title>
                  </v-list-item-content>
                  <span v-if="item.cnt != null" class="pending">待办任务数<span class="num">{{ item.cnt }}</span></span>
                  <v-list-item-action>
                    <v-btn title="星标" @click.stop="starChange(true, item, index)" icon color="orange lighten-1">
                      <v-icon size="20" color="orange lighten-1" v-text="'fa fa-star-o'"></v-icon>
                    </v-btn>
                  </v-list-item-action>
                </v-list-item>
              </div>
            </transition-group>
          </v-list-item-group>
        </v-list>
      </div>
    </div>
    <div class="content-card" v-show="displayMode">
      <!-- 收藏列表 card模式 -->
      <transition-group name="list" tag="div" class="card-collect d-flex flex-wrap">
        <v-card @click="handleClick(item)" v-ripple v-for="(item, index) in collect" :key="item.id" class="mx-2 my-3">
          <span class="pin-bg"></span>
          <v-card-text>
            <v-row class="star" justify="end">
              <v-btn title="星标" class="mr-1" @click.stop="starChange(false, item, index)" icon>
                <v-icon size="20" color="orange lighten-1" v-text="'fa fa-star'"></v-icon>
              </v-btn>
            </v-row>
            <v-row align="center" justify="center">
              <v-icon :size="55" :color="getColor()" v-text="getIcon()"></v-icon>
              <i :class="getIcon() + '' + getColor()"></i>
            </v-row>
            <v-row class="px-3 py-6" align="center" justify="center">
              <h3 class="card-title">{{ item.name }}</h3>
            </v-row>
          </v-card-text>
        </v-card>
      </transition-group>
      <transition-group name="list" tag="div" class="card-list d-flex flex-wrap">
        <v-card @click="handleClick(item)" v-ripple v-for="(item, index) in list" :key="item.id" v-show="!isCollect" class="mx-2">
          <v-card-text>
            <v-row class="star" justify="end">
              <v-btn title="星标" class="mr-1" @click.stop="starChange(true, item, index)" icon color="orange lighten-1">
                <v-icon size="20" color="orange lighten-1" v-text="'fa fa-star-o'"></v-icon>
              </v-btn>
            </v-row>
            <v-row align="center" justify="center">
              <v-icon :size="45" :color="getColor()" v-text="getIcon()"></v-icon>
            </v-row>
            <v-row class="px-3 py-6" align="center" justify="center">
              <h3 class="card-title">{{ item.name }}</h3>
            </v-row>
          </v-card-text>
        </v-card>
      </transition-group>
      <!-- 任务列表 card模式 -->
    </div>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Model,
  Emit,
  Watch,
  Provide,
} from "vue-property-decorator";

import { Subject, Subscription } from "rxjs";
import "./app-list-collect.less";

@Component({})
export default class AppProjectList extends Vue {
  /**
   *列表数据集合
   *
   * @type {Array}
   * @memberof AppProjectList
   */
  @Prop() public list!: Array<any>;

  /**
   * 收藏数据集合
   *
   * @type {Array}
   * @memberof AppProjectList
   */
  @Prop() public collect!: Array<any>;

  /**
   *列表数据集合显示标记
   *
   * @type {Array}
   * @memberof ProjectListView
   */
  @Prop() public isCollect!: boolean;

  /**
   * 视图通讯对象
   *
   * @type {Subject<ViewState>}
   * @memberof AppProjectList
   */
  @Prop() public viewState!: Subject<ViewState>;

  /**
   * 视图状态事件
   *
   * @public
   * @type {(Subscription | undefined)}
   * @memberof AppProjectList
   */
  public viewStateEvent: Subscription | undefined;

  /**
   * 列表显示模式
   *
   * @type {boolean}
   * @memberof ProjectListView
   */
  @Prop() public displayMode!: boolean;

  /**
   * 颜色
   *
   * @type {Array}
   * @memberof ProjectListView
   */
  public colors: Array<string> = [
    "red",
    "pink",
    "purple",
    "blue",
    "indigo",
    "green",
    "teal",
  ];

  /**
   * 图标
   *
   * @type {Array}
   * @memberof ProjectListView
   */
  public icons: Array<string> = [
    "fa fa-android",
    "fa fa-rmb",
    "fa fa-handshake-o",
    "fa fa-diamond",
    "fa fa-envelope",
    "fa fa-rocket",
    "fa fa-plane",
  ];

  /**
   * 产生一个1~7的随机数
   *
   * @return {number}
   * @memberof ProjectListView
   */
  public getRandom(): number {
    let num: number = Math.random();
    num = num * 7;
    return Math.floor(num);
  }

  /**
   * 获取一个随机颜色
   *
   * @return {string}
   * @memberof ProjectListView
   */
  public getColor(): string {
    return this.colors[this.getRandom()] + " lighten-3";
  }

  /**
   * 获取一个随机图标
   *
   * @return {string}
   * @memberof ProjectListView
   */
  public getIcon(): string {
    return this.icons[this.getRandom()];
  }

  /**
   * 跳转到详情页面
   *
   * @event click
   * @param {any}
   * @memberof ProjectListView
   */
  public handleClick(item: any) {
    this.$emit("click", item);
  }
  /**
   * 改变项目收藏状态
   *
   * @param {any,number}
   * @memberof ProjectListView
   */
  public starChange(starStatus: boolean, item: any, index: number) {
    let params: any = {};
    Object.assign(params, { starStatus: starStatus, item: item, index: index });
    this.$emit("starChange", params);
  }
}
</script>
